<template>
  <div class="detail-banner">
    <div class="detail_back" @click="$router.push('/')">
      <span class="iconfont">&#xe624;</span>
    </div>
    <el-carousel height="4rem">
      <el-carousel-item v-for="item in list" :key="item">
        <el-image
          :src="item"
          fit="cover"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="list"
          :initial-index="1"
          show-progress
          loading="lazy"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="bottom_desc">
      <div class="bottom_title">{{ title }}</div>
      <div class="bottom_num">
        <span class="iconfont banner-icon">&#xe692;</span>
        1/{{ list.length }}
      </div>
    </div>
  </div>
</template>
<script setup>
defineProps({
  list: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: '全球收客：佛罗伦萨+罗马+威尼斯 5 天'
  }
})
</script>
<style lang="scss" scoped>
.detail-banner {
  width: 100%;
  height: 4rem;
  position: relative;
  background-color: #fff;
  // background: #fff url('https://gw.alicdn.com/tps/TB1WmuBKFXXXXXSXFXXXXXXXXXX-750-300.jpg') no-repeat center;
  // background-size: cover; /* 确保图片覆盖整个容器 */
  .detail_back {
    z-index: 111;
    display: block;
    border-radius: 100%;
    position: absolute;
    top: .1rem;
    left: .1rem;
    padding: .2rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  .bottom_desc {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: space-between;
   padding: 0 .1rem;
   color: #fff;
   background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
   .bottom_title, .bottom_num {
    padding: .1rem 0;
    font-size: .3rem;
   }
  }
}
</style>
